webrtc-adapter

What is webrtc-adapter?

The webrtc-adapter npm package is a shim to insulate apps from spec changes and prefix differences in WebRTC APIs. It helps developers write code that works across different browsers by providing a consistent API.

What are webrtc-adapter's main functionalities?

Browser Compatibility

The webrtc-adapter package helps ensure that WebRTC code is compatible across different browsers by normalizing the API differences. This code sample demonstrates how to use the adapter to get browser details.

const adapter = require('webrtc-adapter');
console.log(adapter.browserDetails.browser); // Outputs the browser name
console.log(adapter.browserDetails.version); // Outputs the browser version

Unified API

The webrtc-adapter package provides a unified API for accessing media devices, making it easier to write cross-browser WebRTC applications. This code sample shows how to use the adapter to access the user's media devices.

const adapter = require('webrtc-adapter');
const getUserMedia = navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
getUserMedia({ video: true, audio: true })
  .then(stream => {
    console.log('Got MediaStream:', stream);
  })
  .catch(error => {
    console.error('Error accessing media devices.', error);
  });

Peer Connection

The webrtc-adapter package helps manage peer connections by normalizing the API across different browsers. This code sample demonstrates how to create a peer connection and handle ICE candidates.

const adapter = require('webrtc-adapter');
const pc = new RTCPeerConnection();
pc.onicecandidate = event => {
  if (event.candidate) {
    console.log('New ICE candidate:', event.candidate);
  }
};
pc.createOffer()
  .then(offer => pc.setLocalDescription(offer))
  .then(() => console.log('Offer created and set as local description'))
  .catch(error => console.error('Error creating offer:', error));

Other packages similar to webrtc-adapter

simple-peer

The simple-peer package is a lightweight wrapper around the WebRTC API that simplifies peer-to-peer data, video, and audio connections. Unlike webrtc-adapter, which focuses on normalizing the WebRTC API across browsers, simple-peer provides a higher-level abstraction for creating and managing peer connections.

peerjs

The peerjs package is a library that simplifies WebRTC peer-to-peer data, video, and audio connections. It provides a server component for managing peer connections, which is different from webrtc-adapter's focus on API normalization. PeerJS is more focused on providing an easy-to-use API for creating peer connections.

rtcpeerconnection

The rtcpeerconnection package is a simple wrapper around the RTCPeerConnection API, providing a more straightforward interface for creating and managing WebRTC connections. Unlike webrtc-adapter, which aims to normalize the WebRTC API across different browsers, rtcpeerconnection focuses on simplifying the use of the RTCPeerConnection API.

README

WebRTC adapter

adapter.js is a shim to insulate apps from spec changes and prefix differences in WebRTC. The prefix differences are mostly gone these days but differences in behaviour between browsers remain.

This repository used to be part of the WebRTC organisation on github but moved. We aim to keep the old repository updated with new releases.

Install

NPM

npm install webrtc-adapter

Bower

bower install webrtc-adapter

Usage

Javascript

Just import adapter:

import adapter from 'webrtc-adapter';

No further action is required. You might want to use adapters browser detection which detects which webrtc quirks are required. You can look at

adapter.browserDetails.browser

for webrtc engine detection (which will for example detect Opera or the Chromium based Edge as 'chrome') and

adapter.browserDetails.version

for the version according to the user-agent string.

NPM

Copy to desired location in your src tree or use a minify/vulcanize tool (node_modules is usually not published with the code). See webrtc/samples repo as an example on how you can do this.

Prebuilt releases

Web

In the gh-pages branch prebuilt ready to use files can be downloaded/linked directly. Latest version can be found at https://webrtc.github.io/adapter/adapter-latest.js. Specific versions can be found at https://webrtc.github.io/adapter/adapter-N.N.N.js, e.g. https://webrtc.github.io/adapter/adapter-1.0.2.js.

Bower

You will find adapter.js in bower_components/webrtc-adapter/.

NPM

In node_modules/webrtc-adapter/out/ folder you will find 4 files:

• adapter.js - includes all the shims and is visible in the browser under the global adapter object (window.adapter).
• adapter_no_edge.js - same as above but does not include the Microsoft Edge (ORTC) shim.
• adapter_no_edge_no_global.js - same as above but is not exposed/visible in the browser (you cannot call/interact with the shims in the browser).
• adapter_no_global.js - same as adapter.js but is not exposed/visible in the browser (you cannot call/interact with the shims in the browser).

Include the file that suits your need in your project.

Development

Head over to test/README.md and get started developing.

Publish a new version

• Go to the adapter repository root directory
• Make sure your repository is clean, i.e. no untracked files etc. Also check that you are on the master branch and have pulled the latest changes.
• Depending on the impact of the release, either use patch, minor or major in place of <version>. Run npm version <version> -m 'bump to %s' and type in your password lots of times (setting up credential caching is probably a good idea).
• Create and merge the PR if green in the GitHub web ui
• Go to the releases tab in the GitHub web ui and edit the tag.
• Add a summary of the recent commits in the tag summary and a link to the diff between the previous and current version in the description, example.
• Go back to your checkout and run git pull
• Run npm publish (you need access to the webrtc-adapter npmjs package). For big changes, consider using a tag version such as next and then change the dist-tag after testing.
• Done! There should now be a new release published to NPM and the gh-pages branch.

Note: Currently only tested on Linux, not sure about Mac but will definitely not work on Windows.

Publish a hotfix patch versions

In some cases it may be necessary to do a patch version while there are significant changes changes on the master branch. To make a patch release,

• checkout the latest git tag using git checkout tags/vMajor.minor.patch.
• checkout a new branch, using a name such as patchrelease-major-minor-patch.
• cherry-pick the fixes using git cherry-pick some-commit-hash.
• run npm version patch. This will create a new patch version and publish it on github.
• check out origin/bumpVersion branch and publish the new version using npm publish.
• the branch can now safely be deleted. It is not necessary to merge it into the main branch since it only contains cherry-picked commits.